<template>
  <el-card class="card">
    <div slot="header" class="clearfix">
      <span>{{ popData.title }}</span>
    </div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      :label-position="labelPosition"
      label-width="90px"
      class="form"
    >
      <el-form-item label=" 题目" prop="questionName">
        <el-input
          v-model="form.questionName"
          class="inputWidth"
          type="textarea"
          placeholder="请填写 题目"
          autosize
        />
      </el-form-item>
      <el-form-item label=" 公司名称" prop="companyId">
        <el-select
          v-model="form.companyId"
          clearable
          filterable
          placeholder="请选择公司"
          style="width: 220px"
          @change="searchDept"
        >
          <el-option
            v-for="item in companyList"
            :key="item.id"
            :label="item.companyName"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" style="margin-left: 20px" @click="createCompany">创建公司</el-button>
      </el-form-item>
      <el-form-item label=" 部门名称" prop="companyPostId">
        <el-select
          v-model="form.companyPostId"
          style="width: 220px"
          clearable
          filterable
          allow-create
          placeholder="请选择部门"
        >
          <el-option
            v-for="item in deptList"
            :key="item.id"
            :label="item.deptName"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" style="margin-left: 20px" @click="createDept">创建部门</el-button>
      </el-form-item>
      <el-form-item label=" 面试时间" prop="interviewTime">
        <el-date-picker
          v-model="form.interviewTime"
          style="width: 220px"
          type="datetime"
          placeholder="请选择面试时间"
          :picker-options="expireTimeOption"
        />
      </el-form-item>
      <el-form-item label=" 问题难度" prop="questionLevel">
        <el-select
          v-model="form.questionLevel"
          style="width: 220px"
          placeholder="请选择问题难度"
        >
          <el-option label="简单" :value="0" />
          <el-option label="适中" :value="1" />
          <el-option label="困难" :value="2" />
          <el-option label="地狱" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label=" 问题标签" prop="tagList">
        <el-select
          v-model="form.tagList"
          style="width: 220px"
          filterable
          multiple
          clearable
          :multiple-limit="5"
        >
          <el-option
            v-for="tag in allTags"
            :key="tag.id"
            :label="tag.tags"
            :value="tag.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="edit"
        >
          {{ loadingText }}
        </el-button>
        <el-button
          type="primary"
          style="margin-left: 50px"
          @click="cancel"
        >
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import sysInterviewQuestion from '@/api/interviewQuestion'
import company from '@/api/company'
import companyDept from '@/api/companyDept'
import sysQuestionLabel from '@/api/questionLabel'
import { popAutoHeightDialog } from '@/utils/popDialog'

export default {
  props: ['popData'],
  data() {
    return {
      labelPosition: 'left',
      companyList: [],
      deptList: [],
      form: {
        questionName: '',
        companyId: null,
        companyPostId: null,
        interviewTime: '',
        questionLevel: 0,
        tagList: []
      },
      loadingText: '保存',
      allTags: [],
      expireTimeOption: {
        disabledDate(time) {
          // 如果没有后面的-8.64e6就是不可以选择今天的
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      rules: {
        questionName: [
          { required: true, message: '请输入题目', trigger: 'blur' },
          { min: 5, max: 255, message: '长度在 5 到 2555 个字符', trigger: 'blur' }
        ],
        companyId: [
          { required: true, message: '请选择公司', trigger: 'blur' }
        ],
        companyPostId: [
          { required: true, message: '请选择部门', trigger: 'blur' }
        ],
        interviewTime: [
          { required: true, message: '请选择面试时间', trigger: 'blur' }
        ],
        questionLevel: [
          { required: true, message: '请选择难度等级', trigger: 'blur' }
        ],
        tagList: [
          { required: true, message: '请选择问题标签', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.searchCompany()
    this.searchTags()
  },
  methods: {
    // 回显
    getDetailById(id) {
      sysInterviewQuestion.getDetail({ id: id, plusShowNum: false }).then((res) => {
        this.form = res.data
        const tagList = []
        this.form.tagsList.map(item => {
          tagList.push(item.id)
        })
        this.$nextTick(() => {
          this.formTagList = tagList
        })
        const companyId = res.data.company.id
        this.form.companyId = companyId
        if (companyId) {
          this.searchDept()
        }
      })
    },
    searchCompany() {
      company.searchCompany().then(resp => {
        this.companyList = resp.data
      })
    },
    searchDept() {
      const companyId = this.form.companyId
      if (isNaN(companyId)) {
        this.createCompany = true
      } else {
        companyDept.searchDept({ companyId }).then(resp => {
          this.deptList = resp.data
        })
      }
    },
    edit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          sysInterviewQuestion.edit(this.form).then(res => {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
          })
          if (this.$router){
            this.$router.push('/question/answer')
          }
          this.$parent.closePop()
        }
      })
    },
    searchTags() {
      sysQuestionLabel.searchTags().then(resp => {
        this.allTags = resp.data
        const id = this.popData.id
        if (id) {
          this.form.id = id
          this.loadingText = '编辑'
          this.getDetailById(id)
        } else {
          this.loadingText = '保存'
        }
      })
    },
    createCompany() {
      popAutoHeightDialog('views/company/form', '600px',
        this.searchCompany, { title: '新建公司' }
      )
    },
    createDept() {
      popAutoHeightDialog('views/companyDept/form', '600px',
        this.searchDept, { title: '新建部门' }
      )
    },
    cancel() {
      this.$parent.closePop()
    }
  }
}
</script>
<style>
  @import "../../styles/dialogForm.scss";
  .inputWidth{
    width: 340px;
  }
  .form{
    width: 60%;
    margin: auto auto;
  }
</style>
